<template>
  <div class="error-container">
    <el-empty description="文件加载失败">
      <template #image>
        <el-icon class="error-icon"><WarningFilled /></el-icon>
      </template>
      <template #description>
        <p class="error-text">{{ error }}</p>
      </template>
      <el-button type="danger" @click="$emit('retry')">
        <el-icon class="mr-1"><RefreshRight /></el-icon>
        重试
      </el-button>
    </el-empty>
  </div>
</template>

<script setup>
import { WarningFilled, RefreshRight } from '@element-plus/icons-vue';

defineProps({
  error: {
    type: String,
    required: true
  }
});

defineEmits(['retry']);
</script>

<style scoped>
.error-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.error-icon {
  font-size: 60px;
  color: #ef4444;
}

.error-text {
  color: #ef4444;
  margin-top: 16px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .error-icon {
    font-size: 48px;
  }
  
  .error-text {
    font-size: 14px;
    margin: 12px 0;
  }
}
</style> 